<template>
  <el-card style="margin-top:10px">
    <el-form inline>
      <el-form-item>
        <el-input v-model="searchObj.roleName" />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button @click="searchObj.roleName=''">清空</el-button>
    </el-form>

    <div style="margin-bottom:20px">
      <el-button v-show="$store.state.user.buttons.indexOf('btn.Role.add')!==-1" type="primary" @click="show">添加</el-button>
      <el-button v-show="$store.state.user.buttons.indexOf('btn.Role.remove')!==-1" type="danger" :disabled="selectedIds.length===0" @click="delmore">批量删除</el-button>
    </div>

    <el-table
      style="width: 100%"
      :data="data"
      border
      @selection-change="changeSel"
    >
      <template slot="empty">
        <el-empty description="空" />
      </template>
      <el-table-column
        prop="prop"
        label="label"
        width="55"
        type="selection"
      />
      <el-table-column
        prop="prop"
        label="序号"
        width="80"
        type="index"
      />
      <el-table-column
        prop="roleName"
        label="名称"
      >
        <template slot-scope="{row,$index}">
          <div>
            <span v-show="!row.edit">{{ row.roleName }}</span>
            <el-input v-show="row.edit" :ref="`saveInput${$index}`" v-model.trim="role.roleName" placeholder="请输入名称" style="width:70%;margin-right:10px" size="mini" />
            <el-button v-show="row.edit" type="warning" icon="el-icon-refresh" size="mini" @click="quxiao(row)">取消</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="prop"
        label="操作"
        width="250"
      >
        <template slot-scope="{row,$index}">
          <div>
            <el-button :disabled="$store.state.user.buttons.indexOf('btn.Role.assgin')===-1" type="info" icon="el-icon-info" title="分配权限" size="mini" @click="roleAuth(row)" />
            <el-button :disabled="$store.state.user.buttons.indexOf('btn.Role.update')===-1" style="margin-right:10px" type="primary" :icon="row.edit===true? 'el-icon-check' : 'el-icon-edit'" title="修改角色" size="mini" @click="editFn(row,$index)" />
            <el-popconfirm
              :title="`确定删除${row.roleName}吗?`"
              :disabled="$store.state.user.buttons.indexOf('btn.Role.remove')===-1"
              @confirm="del(row)"
            >
              <el-button slot="reference" type="danger" icon="el-icon-delete" title="删除角色" size="mini" />
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :close-on-click-modal="false"
      title="添加角色"
      :visible.sync="dialogVisible"
    >
      <el-form ref="ruleForm" :rules="rules" :model="role">
        <el-form-item label="请输入新名称" prop="roleName" required>
          <el-input v-model="role.roleName" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="checkAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      :page-size="5"
      :page-sizes="[5,10,15]"
      :current-page="page"
      layout="prev,pager,next,jumper,->,sizes,total"
      :total="total"
      @current-change="change"
      @size-change="sizeChange"
    />

  </el-card>
</template>

<script>
export default {
  data() {
    return {
      searchObj: {
        roleName: ''
      },
      page: 1,
      limit: 5,
      total: 0,
      data: [],
      dialogVisible: false,
      selectedIds: [],
      role: {
        roleName: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入新名称', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await this.$api.role.getPageList(this.page, this.limit, this.searchObj)
      if (res.code === 20000) {
        this.data = res.data.items
        for (let i = 0; i < this.data.length; i++) {
          this.$set(this.data[i], 'edit', false)
        }
        this.total = res.data.total
      }
    },
    search() {
      this.page = 1
      this.limit = 5
      this.getData()
    },
    show() {
      this.dialogVisible = true
    },
    changeSel(e) {
      this.selectedIds = []
      e.map(item => {
        this.selectedIds.push(item.id)
      })
    },
    async del(e) {
      const res = await this.$api.role.removeById(e.id)
      if (res.code === 20000) {
        this.$message({ type: 'success', message: '删除成功' })
        this.getData()
      }
    },
    async delmore() {
      const res = await this.$api.role.removeRoles(this.selectedIds)
      if (res.code !== 20000) {
        this.$message.error('删除失败')
      }
      this.getData()
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
    },
    checkAdd() {
      this.$refs.ruleForm.validate(async(e) => {
        if (e) {
          const res = await this.$api.role.save(this.role)
          if (res.code === 20000) {
            this.$message({ type: 'success', message: '添加成功' })
            this.getData()
            this.dialogVisible = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async editFn(e, index) {
      if (e.edit === false) {
        for (let i = 0; i < this.data.length; i++) {
          this.$set(this.data[i], 'edit', false)
        }
        this.role = { ...e }
        this.$set(e, 'edit', true)
        this.$nextTick(_ => {
          this.$refs['saveInput' + index].$refs.input.focus()
        })
      } else {
        if (this.role.roleName === '') return
        const res = await this.$api.role.updateById({ id: e.id, roleName: this.role.roleName })
        if (res.code === 20000) {
          this.$message({ type: 'success', message: '修改成功' })
          this.$set(e, 'edit', false)
          this.getData()
        }
      }
    },
    quxiao(e) {
      this.$set(e, 'edit', false)
    },
    change(e) {
      this.page = e
      this.getData()
    },
    sizeChange(e) {
      this.limit = e
      this.getData()
    },
    roleAuth(e) {
      this.$router.push({ name: 'RoleAuth', params: { id: e.id }, query: { roleName: e.roleName }})
      console.log(e)
    }
  }
}
</script>

  <style>

  </style>

